<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>盒子模型</title>
	<style type="text/css">
		.box{
			text-indent: 40px;
			width: 200px;
			height: 200px;
			background-color: gold;
			/* #000 黑色 */
/* 			border-top-color: #000;
			border-top-width: 10px; */
			/* 设置顶部线条样式 实线:solid; 虚线: dashed; 点线:dotted;  */
			/* border-top-style:  solid; */
/* 			border-top: 10px solid #000;
 			border-left: 10px dashed black;
 			border-right: 10px dotted black;
			border-bottom: 10px solid black; */
			border: 10px solid black;
			/* 设置文字到边框距离 */
			/* padding-top: 20px;
			padding-left: 40px;
			padding-right: 80px;
			padding-bottom: 100px; */
			
			/* 分别设置盒子得 上 右 下 左 */
			/* padding: 20px 80px 100px 40px; */
			/* 分别设置盒子得 上 右 下 左  此种结果使得左右宽度相等*/
			/* padding: 20px 80px 100px; */
			/* 分别设置上下左右得高度 */
			/* padding: 20px 80px; */
			/* 设置四条边得padding值 */
			padding: 20px;
			/* 盒子的 边框距离外表得距离border => margin */
			/* margin-top:100px; */
			margin: 100px 0 0 100px;





		}

	</style>

</head>
<body>
	<div class="box">所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
	</div>


</body>
</html>